<template>
  <el-dialog v-model="dialogFormVisible" width="75%" @close="close">
    <Form
      :formOption="formOptions"
      ref="form"
      @onSubmit="onSubmit"
      :zyryList="zyryList"
      :zypList="zypList"
      :jobType="jobType"
    >
      <template #aqcsinput1="{ formData, option }">
        <el-col :span="24">
          <el-form-item
            label-width="800px"
            required
            label-position="left"
            prop="yesOrNo2"
          >
            <template #label>
              <div>
                2. 与动火设备相连接的所有管线已断开，加盲板(
                <input
                  type="text"
                  class="input-num"
                  v-model="formData.mbnum"
                />)块，未采取水封或仅关闭阀门的方式代替盲板（监护人）
              </div>
            </template>
            <div>
              <el-radio-group style="width: 200px" v-model="formData.yesOrNo2">
                <el-radio label="是"> 涉及</el-radio>
                <el-radio label="否"> 不涉及</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </el-col>
      </template>
      <template #risk="{ formData, option }">
        <el-col :span="24">
          <el-form-item
            label-width="120px"
            required
            label-position="left"
            :prop="option.prop"
          >
            <template #label> 风险辨识结果 </template>
            <el-checkbox-group
              v-model="formData[option.prop]"
              style="width: 100%"
            >
              <el-checkbox :label="ele.value" v-for="ele in option.optionItems">
                {{ ele.text }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </template>
      <template #aqcsinput2="{ formData, option }">
        <el-col :span="24">
          <el-form-item
            label=""
            label-width="800px"
            required
            label-position="left"
            prop="yesOrNo8"
          >
            <template #label>
              <div>
                8.现场配备灭火器(
                <input
                  type="text"
                  class="input-num"
                  v-model="formData.mhqnum"
                />)台，灭火毯(
                <input
                  type="text"
                  class="input-num"
                  v-model="formData.mhtnum"
                />
                )块，消防蒸汽带或消防水带(
                <input
                  type="text"
                  class="input-num"
                  v-model="formData.fsdnum"
                />)（监护人）
              </div>
            </template>
            <div>
              <el-radio-group style="width: 200px" v-model="formData.yesOrNo8">
                <el-radio label="是"> 涉及</el-radio>
                <el-radio label="否"> 不涉及</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </el-col>
      </template>
      <template #sckjinput="{ formData, option }">
        <el-col :span="24">
          <el-form-item
            label=""
            required
            label-width="800px"
            label-position="left"
            prop="yesOrNo14"
          >
            <template #label>
              <div>
                14.已配备作业应急措施：消防器材（
                <input
                  type="text"
                  class="input-num"
                  v-model="formData.xfqcnum"
                />）、救生绳（
                <input
                  type="text"
                  class="input-num"
                  v-model="formData.jssnum"
                />
                ）、气防装备（
                <input
                  type="text"
                  class="input-num"
                  v-model="formData.qfsbnum"
                />），盛有腐蚀性介质的容器作业现场已配备应急用冲洗水（监护人）
              </div>
            </template>
            <div>
              <el-radio-group style="width: 200px" v-model="formData.yesOrNo14">
                <el-radio label="是"> 涉及</el-radio>
                <el-radio label="否"> 不涉及</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </el-col>
      </template>
      <template
        v-for="(item, index) in longLabelSlots"
        #[item]="{ formData, option }"
      >
        <el-col :span="24">
          <el-form-item
            label=""
            :prop="option.prop"
            label-width="800px"
            label-position="top"
            required
          >
            <template #label>
              <div>
                <div>
                  {{ option.label }}
                </div>
              </div>
            </template>
            <template #default>
              <div>
                <el-radio-group
                  style="width: 200px"
                  v-model="formData[option.prop]"
                >
                  <el-radio
                    :label="ele.value"
                    v-for="ele in option.optionItems"
                  >
                    {{ ele.text }}</el-radio
                  >
                </el-radio-group>
              </div>
            </template>
          </el-form-item>
        </el-col>
      </template>
    </Form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm"> 确 认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import Form from "./form.vue";
import { onMounted, ref, getCurrentInstance, computed } from "vue";
import zyp from "../add-option/index.js";
import { apis as APIS } from "@/api/zygl/zysb.js";
import { apis } from "@/api/zygl/zyp";
import { getUserProfile } from "@/api/system/user";
const longLabelSlots = ref([]);
const formOptions = ref([]);
const submitData = (data) => {
  if (data == false) return;
  let glzyps = [];
  if (data.glqtzyp && data.glqtzyp.length) {
    glzyps = zypList.value.filter((ele) => data.glqtzyp.includes(ele.value));
  }
  let dyjrdjxkydgl = "";
  let yhsbjgl = "";
  if (data.dyjrd && data.xkydgl) {
    dyjrdjxkydgl = data.dyjrd + " , " + data.xkydgl;
  } else if (data.dyjrd && data.xkydgl) {
    dyjrdjxkydgl = data.dyjrd || data.xkydgl;
  }
  if (data.edgl && data.ydmc) {
    yhsbjgl = data.edgl + " , " + data.ydmc;
  } else if (data.edgl && data.ydmc) {
    yhsbjgl = data.edgl || data.ydmc;
  }
  console.log(data);
  APIS.saveBillData({
    specialNumber: billNum.value,
    ptw: billNo.value,
    content: JSON.stringify({
      ...data,
      ...formData.value,
      dyjrdjxkydgl: dyjrdjxkydgl || null,
      yhsbjgl: yhsbjgl || null,
    }),
    jobType: jobType.value,
    jobStartDate: data.jobDate[0],
    jobEndDate: data.jobDate[1],
    local: data.local,
    changeBillNumber: data.glqtzyp && data.glqtzyp.join(","),
    changeBillNumberId: glzyps.map((item) => item.id).join(","),
  }).then((res) => {
    close();
  });
};
const onSubmit = (data) => {
  submitData(data);
};
const submitForm = async () => {
  const data = await form.value.getFormData();
  submitData(data);
};
const billNum = ref("");
const billNo = ref("");
const jobType = ref("");
const form = ref();
const formData = ref({});
const zyryList = ref([]);

const userInfo = ref({});
// 关联作业票列表
const zypList = ref([]);
const zypTypes = {
  1: "吊装安全作业票",
  2: "动火安全作业票",
  3: "高处安全作业票",
  4: "动土安全作业票",
  5: "临时用电安全作业票",
  6: "动用射线安全作业票",
  7: "断路安全作业票",
  8: "盲板抽堵安全作业票",
  9: "设备开孔安全作业票",
  10: "受限空间安全作业票",
};
onMounted(() => {
  getUserProfile().then((res) => {
    userInfo.value = res.data;
  });
});

const dialogFormVisible = ref(false);
const open = async (e) => {
  dialogFormVisible.value = true;
  const { billNumber, billType, pid } = e;
  apis
    .getGlzyp({
      ptw: billNumber,
    })
    .then((res) => {
      zypList.value = [
        ...res.map((ele) => ({
          text: ele.specialNumber + "-" + zypTypes[ele.jobType],
          value: ele.specialNumber,
          id: ele.id,
          ptw: ele.ptw,
        })),
      ];
      console.log(zypList);
    });
  APIS.detail(pid).then((res) => {
    try {
      zyryList.value = JSON.parse(res.jobPersonnel) || [];
    } catch (error) {
      zyryList.value = [];
    }
    billNo.value = billNumber;
    jobType.value = billType;
    const option = zyp[billType];
    formData.value.krqtfxbz = "%LEL";
    formData.value.ydyhwzfxbz = "mg/m³";
    form.value.setFormData({
      titleCode: billNum.value,
      sqr: res.applyPeople,
      local: res.local,
      zynr: res.jobContent,
      jobContent: res.jobContent,
      jobApplyCompany: res.applyCompany,
      zysqdw: res.applyCompany,
      zydw: res.workShop,
      zyjhr: res.custody,
      zydwjhr: res.custody,
      jhr: res.custody,
      custody: res.custody,
      zyfzr: res.jobPersonCharge,
      zydwfzr: res.jobPersonCharge,
      jobCompany: res.workShop,
      dlyy: res.jobContent,
      zyyy: res.jobContent,
      jobDate: [
        `${res.jobPlanStartDate} ${res.jobPlanStartTime}`,
        `${res.jobPlanEndDate} ${res.jobPlanEndTime}`,
      ],
    });
    if (option) {
      formOptions.value = option.formOptions;
      form.value.setOptions(option.formOptions);
      longLabelSlots.value = option.longLabelSlots;
    }
  });
};
const close = () => {
  dialogFormVisible.value = false;
  formData.value = {};
  longLabelSlots.value = [];
  form.value.setOptions([]);
};
defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.input-num {
  display: inline-block;
  width: 50px;
  border-bottom: 1px solid #000;
  font-size: 13px;
  padding: 0 !important;
  vertical-align: middle;
}
.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    position: relative;

    &.current {
      color: blue;

      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 44px;
        height: 0;
        // border-bottom: 2px solid $base-color;
      }
    }
  }
}
.botton-btm {
  height: 11vw;
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
  justify-content: space-around;
}

.input-num {
  display: inline-block;
  width: 50px;
  border-bottom: 1px solid #000;
  font-size: 13px;
  padding: 0 !important;
  vertical-align: middle;
}
</style>
